<template>
	<div class="cart-sku" ref="target">
		<div @click="toggle" class="attrs">
			<span class="ellipsis">{{attrsText}}</span>
			<i class="iconfont icon-angle-down"></i>
		</div>
		<div v-if="visible" class="layer">
			<div v-if="!goods" class="loading"></div>
			<GoodsSku @change="changeSku" v-if="goods" :skuId="skuId" :goods="goods" />
			<XtxButton @click="submit" v-if="goods" type="primary" size="mini" style="margin-left:60px">确认</XtxButton>
		</div>
	</div>
</template>

<script>
	import {
		ref
	} from 'vue'
	import {
		onClickOutside
	} from '@vueuse/core'

	import {
		getSpecsAndSkus
	} from '@/api/goods'
	import GoodsSku from '@/views/goods/components/goods-sku'

	export default {
		props: {
			attrsText: {
				type: String,
				default: ''
			},
			skuId: {
				type: String,
				default: ''
			}
		},

		components: {
			GoodsSku
		},

		setup(props, {emit}) {
			const visible = ref(false)
			const goods = ref(null)
			const target = ref(null)

			const show = () => {
				visible.value = true

				getSpecsAndSkus(props.skuId).then(data => {
					goods.value = data.result
				})
			}
			const hide = () => {
				visible.value = false
				goods.value = null
			}
			const toggle = () => {
				visible.value ? hide() : show()
			}

			onClickOutside(target, () => {
				hide()
			})

			const currSku = ref(null)
			const changeSku = sku => {
				currSku.value = sku
			}

			const submit = () => {
				if (currSku.value && currSku.value.skuId && currSku.value.skuId !== props.skuId) {
					emit('change', currSku.value)
					hide()
				}
			}

			return {
				visible,
				toggle,
				target,
				goods,
				changeSku,
				submit
			}
		}
	}
</script>

<style lang="less" scoped>
	.cart-sku {
		height: 28px;
		border: 1px solid #f5f5f5;
		padding: 0 6px;
		position: relative;
		margin-top: 10px;
		display: inline-block;

		.attrs {
			line-height: 24px;
			display: flex;

			span {
				max-width: 230px;
				font-size: 14px;
				color: #999;
			}

			i {
				margin-left: 5px;
				font-size: 14px;
			}
		}

		.layer {
			position: absolute;
			left: -1px;
			top: 40px;
			z-index: 10;
			width: 400px;
			border: 1px solid @xtxColor;
			box-shadow: 2px 2px 4px lighten(@xtxColor, 50%);
			background: #fff;
			border-radius: 4px;
			font-size: 14px;
			padding: 20px;

			&::before {
				content: "";
				width: 12px;
				height: 12px;
				border-left: 1px solid @xtxColor;
				border-top: 1px solid @xtxColor;
				position: absolute;
				left: 12px;
				top: -8px;
				background: #fff;
				transform: scale(.8, 1) rotate(45deg);
			}

			.loading {
				height: 224px;
				background: url(@/assets/images/loading.gif) no-repeat center;
			}
		}
	}
</style>
